<template>
    <div class="free-course" style="margin-left: 300px;width:1000px">
        <dl>
            <dt>
        <span
                v-for="(tab,index) in tabList"
                :key="index"
                :class="{active: currentTabIndex==index}"
                @click="handleTabClick(tab,index)"
        >{{ tab.title }}</span>
            </dt>
            <dd v-for="(item,index) in course" :key="index" class="course-item">
                <div class="img-box" @click="handleCourseClick(item.id)" style="cursor:pointer;">
                    <img :src="item.coverPath" alt="">
                </div>
                <div class="course-content">
                    <p class="title" v-html="item.className" @click="handleCourseClick(item.id)" style="cursor:pointer;">
                        {{ item.className }}
                    </p>
                    <p class="desc" v-html="item.introduction" style="width:800px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;display:block;">
                        <span>简介： {{item.introduction}}</span>
                    </p>
                    <br>
                    <br>
                    <p class="other">
                        <span>讲师:{{ item.teacher }}</span>
                        <span>{{ item.level }}</span>
<!--                        <span>问答{{ item.question }}</span>-->

                    </p>
                </div>
            </dd>
        </dl>
        <el-pagination
                :current-page="params.currPage"
                layout="total, prev, pager, next"
                :total="total"
                align="center"
                :page-size="params.pageSize"
                @current-change="searchCourse"
        />
    </div>
</template>

<script>
    import {getCourseByKeyWord} from "../../api/course";

    export default {
        name: "index",
        props: {
            list: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        data () {
            return {
                currentTabIndex: 0, // 当前选项卡的索引
                tabList: [], // 选项卡数据
                course:[],
                level:['入门级','初级','中级','高级'],
                params: {
                    currPage:1,
                    pageSize:10,
                    keyword:'',
                },
                total:0
            }
        },
        created () {
            // 初始化选项卡数据
            this.tabList = [
                { title: '搜索结果', type: 0 },
            ]
        },
        mounted () {
            this.searchCourse()
        },
        methods: {
            // 选项卡点击事件
            handleTabClick (tab, index) {
                this.currentTabIndex = index
            },
            searchCourse(val){
                let keyword = this.$route.query.keyword
                this.params.currPage = val
                this.params.keyword = keyword
                getCourseByKeyWord(this.params).then(res => {
                    this.course = res.data.content;
                    this.total = res.data.totalElements
                    this.course.forEach(item =>{
                        item.level = this.tranLevel(item.level)
                    })
                })
            },
            tranLevel(level){
              return  this.level[level-1]
            },
            handleCourseClick (id) {
                this.$router.push({ path: `/course/${id}` })
            }
        },
        computed: {
            filterList () {
                let currTab = this.tabList[this.currentTabIndex]
                return this.list.filter(item => item.type === currTab.type)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .free-course
        dt
            border-bottom: 1px solid #d0d6d9;
            & > span
                margin-right: 48px;
                display: inline-block;
                vertical-align: middle;
                height: 48px;
                line-height: 48px;
                box-sizing: border-box;
                font-size: 14px;
                color: #787d82
                cursor: pointer;
                &:last-child
                    margin-right: 0;
                &.active
                    color: #f01414;
                    border-bottom: 2px solid #f01414;
        .course-item
            display: flex;
            align-items: flex-start;
            padding: 30px 0;
            border-bottom: 1px solid #eff1f0;
            height: 80px;

            &:last-child
                border-bottom: none;
            .img-box
                flex: 0 0 120px;
                width: 120px;
                height: 90px;
                & > img
                    display: block;
                    width: 100%;
                    height: 100%;
            .course-content
                flex: 1;
                margin-left: 30px;
                .title
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 30px;
                    .status
                        float: right;
                        margin-right: 25px;
                        font-size: 14px;
                        color: #787d82;
                .learn
                    padding: 10px 0 22px;
                    & > span
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 15px;
                        color: #787d82;
                        line-height: 20px;
                        font-size: 14px;
                        &:last-child
                            margin-right: 0;
                        &.rate
                            color: #f01414;
                .other
                    & > span
                        margin-right: 100px;
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 14px;
                        color: #787d82;
                        &.learn-btn
                            float: right;
                            margin-right: 0;
                            width: 104px;
                            height: 36px;
                            background-color: #f01414;
                            border-radius: 18px;
                            text-align: center;
                            line-height: 36px;
                            color: #fff;
                            cursor: pointer;
                .desc
                    vertical-align: middle;
                    font-size: 14px;
                    color: #787d82;
                    multline-ellipsis(2)
</style>